<script setup lang="ts">
  import Header from './components/Header.vue'
  import LeftSlide from './components/LeftSlide.vue'
  import Tags from './components/Tags.vue'
  import Breadcrumb from './components/Breadcrumb.vue';
</script>
<template>
  <div class="root">
      <Header/>
      <LeftSlide/>
      <Tags/>
      <Breadcrumb/>
      <div class="content-container">
          <div class="content-view">
            <el-card>
              <router-view v-slot="{ Component, route }">
                <transition>
                  <div v-if="route.meta.keepAlive">
                    <keep-alive>
                      <component :is="Component" />
                    </keep-alive>
                  </div>
                  <div v-else>
                    <component :is="Component" />
                  </div>
                </transition>
              </router-view>
            </el-card>
          </div>
      </div>
  </div>
</template> 

<style scoped>
  .root {
    width: 100vw;
    height: 100vh;
  }
  .content-container {
    position: absolute;
    right: 0;
    top: 50px;
    left: 200px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f0f0f0;
  }
  .content-view {
    padding: 80px 20px 20px;
  }
</style>